<template>
  <div class="container-fans">
    <el-card>
      <div slot="header">
        <my-bread>粉丝管理</my-bread>
      </div>
      <!-- 标签页组件 el-tabs-->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="粉丝列表" name="list">
          <!-- 列表 -->
          <div class="fans-list">
            <!-- key 必须使用 字符串/数字  item.id是对象(json-bigint转换的)-->
            <div class="fans-item" v-for="item in fans" :key="item.id.toString()">
              <el-avatar :size="80" :src="item.photo"></el-avatar>
              <p>{{item.name}}</p>
              <el-button type="primary" size="small" plain>+ 关注</el-button>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="reqParams.per_page"
            :current-page="reqParams.page"
            @current-change="changePage"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="img">
          <div ref="bar" style="width:600px;height:400px"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 导入 echarts
import echarts from "echarts";

export default {
  name: "page-fans",
  data() {
    return {
      activeName: "list",
      // 请求参数
      reqParams: {
        page: 1,
        per_page: 24
      },
      // 粉丝列表
      fans: [],
      // 总条数
      total: 0
    };
  },
  //生命周期 - vue实例创建完成（访问当前this实例）
  created() {
    this.getFans();
  },
  // 函数执行时 - DOM元素才渲染完毕
  mounted() {
    this.initBar();
  },
  methods: {
    // 初始化 echarts 的柱状图
    async initBar() {
      try {
        // 初始化 echarts
        const myChart = echarts.init(this.$refs.bar);
        // 定义图表配置
        const option = {
          color: ["#3398DB"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              // X 轴的刻度数据
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: "value"
            }
          ],
          series: [
            {
              name: "直接访问",
              type: "bar",
              barWidth: "60%",
              // 刻度对应的数据
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        };
        // 获取数据，给option 数据赋值
        const res = await this.$http.get("statistics/followers");
        // 接收数据
        const obj = res.data.data.age;
        const xAxisData = [];
        const seriesData = [];
        for (const key in obj) {
          xAxisData.push(key); // 刻度
          seriesData.push(obj[key]); // 刻度对应的数据
        }
        // 设置 刻度 对应的 数据
        option.xAxis[0].data = xAxisData;
        option.series[0].data = seriesData;
        // 使用配置
        myChart.setOption(option);
      } catch (e) {
        this.$message.error("网络不稳定，请刷新重试");
      }
    },
    // 分页
    changePage(newPage) {
      this.reqParams.page = newPage;
      this.getFans();
    },
    // 获取粉丝列表
    async getFans() {
      const {
        data: { data }
      } = await this.$http.get("followers", {
        params: this.reqParams
      });
      this.fans = data.results;
      this.total = data.total_count;
    }
  }
};
</script>

<style lang="less" scoped>
.fans-list {
  .fans-item {
    width: 100px;
    height: 160px;
    border: 1px dashed #ddd;
    display: inline-block;
    margin-right: 31px;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 10px;

    p {
      margin: 10px;
      font-size: 14px;
    }
  }
}
</style>